<template>
  <div class="section" ref="parent">
    <div class="border-row"></div>
    <div class="border-col"></div>

    <div class="tab-header">
      <el-radio-group v-model="radio" size="mini" class="radio-group" @change="handleChange">
        <el-radio-button label="阅读量"></el-radio-button>
        <el-radio-button label="发稿量"></el-radio-button>
        <el-radio-button label="转发量"></el-radio-button>
      </el-radio-group>
    </div>
    <div ref="charts" :style="chartsDom" v-show="jz"></div>
             <animae-jz   :style="chartsDom" v-if="!jz"></animae-jz>
  </div>
</template>
<script>
import {
  //阅读量
  getPolicyNewsReading,
  //发稿量
  getPolicyNewsRelease,
  //转发量
  getPolicyNewsShare
} from '@/api/data'
export default {
  data() {
    return {
      radio: '阅读量',
      chartsDom: {},
      chartData: [],
      jz:true
    }
  },
  props: ['height','dateProp'],
  computed: {
    setStyle: {
      get() {
        return this.$refs.parent.offsetWidth
      },
      set(val) {
        this.chartsDom = {
        width: val - 30 + 'px',
        height: this.height - 30 - 31 + 'px',
        'z-index': 100,
        position: 'relative',
        // 'background-color': 'red'
      }
      }
    }
  },
  mounted() {
    this.setStyle = this.setStyle;
    this.init();
  },
  methods: {
    init() {
      this.jz=false
	  this.chartData = [];
      const request = () => {
        if(this.radio === '阅读量') {
          return getPolicyNewsReading(this.dateProp)
        }else if(this.radio === '发稿量') {
          return getPolicyNewsRelease(this.dateProp)
        }else if(this.radio === '转发量') {
          return getPolicyNewsShare(this.dateProp)
        }
      }
      request()
      .then(res=>{
        this.jz=true
        if(res.data.data && res.data.data.length > 0) {
          this.chartData = res.data.data;
          this.drawChart();
        }else{

        }
      })
    },
    drawChart() {
      let option = {
          grid: {
            top: 15,
            bottom: 20
          },
          xAxis: {
              type: 'category',
              data: this.chartData.map(v=>v.name),
              axisLabel: {
                textStyle: {
                  color: 'rgba(255,255,255,1)'
                }
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              }
          },
          yAxis: {
              type: 'value',
              axisLabel: {
                textStyle: {
                  color: 'rgba(255,255,255,.3)'
                }
              },
              splitLine: {
                show: false
              },
              axisTick: {
                show: false
              },
              axisLine: {
                show: false
              }
          },
          series: [{
              data: this.chartData.map(v=>v.value),
              type: 'bar',
              barWidth: 30,
              itemStyle: {
                color: new this.$echarts.graphic.LinearGradient(
                    0, 1, 0, 0,
                    [
                        {offset: 0, color: '#2a8ad0'},
                        {offset: 1, color: '#3af3ce'}
                    ]
                )
              }
          }]
      };
      let chartsInit = this.$echarts.init(this.$refs.charts);
      chartsInit.setOption(option);
    },
    handleChange() {
      this.$nextTick(_=>{
        this.init();
      });
    },
  }
}
</script>
<style lang="stylus" scoped>
  .section
    width 100%
    height 100%
  .tab-header
    width 100%
    height 30px
    overflow hidden
  .radio-group
    position relative
    z-index 1000
    >>> .el-radio-button.is-active .el-radio-button__inner
      background-color #037880
      color #ffffff
      box-shadow -1px 0 0 #037880
    >>> .el-radio-button__inner
      background-color transparent
      color #35ced8
      border 1px solid #037880
</style>